Abgeschnittenes Modul bei kleinem Bildschirm

Hallo,

Ich habe auf meiner Website mit dem {LESS} Allrounder Template auf der rechten Seite ein Modul, indem ein Iframe eingebunden ist. Wird die Seite über einen entsprechend großen Bildschirm aufgerufen, wird das Modul korrekt dargestellt (Screenshot 1).
Auf kleineren Bildschirmen (z.B. auf einem Tablet) werden sämtliche Inhalte durch das Template automatisch verkleinert, damit die Website auch auf solchen Bildschirmen angezeit werden kann.

Soweit funktioniert das ganz gut - bis auf das erwähnte selbst erzeugte Modul. Dieses verkleinert sich und schneidet damit den Inhalt ab (siehe Screenshot 2).

Ich habe versucht in der template13.css das "width" Attribut von den standard 20% auf einen fixen Pixel-Wert zu ändern. Hier habe ich aber das Problem, dass das Modul dann zwar seine Größe behält, bei einem kleinen Bildschirm aber merkwürdig nach unten verschoben wird. (Screenshot 3)

Die Idee wäre also, dass beim Aufruf der Website auf einem kleinen Bildschirm sich alle Inhalte verkleinern bis auf das erwähnte Modul, welches seine fixe Größe und Position rechts behalten soll.

Leider weiß ich nicht wie ich das bewerkstelligen kann und hoffe, dass hier jemand eine Idee hat.

Es handelt sich um folgende Website:
www.schachgesellschaft-graz.at/

Du müsstest vermutlich recht komplexe Regeln basierend auf media-queries machen. Das heisst den maincontent für kleinere Auflösungen entsprechend verkleinern damit das Modul daneben noch in der gewünschten Grösse dargestellt wird. Darunter wird ann aber dein Hauptinhalt leiden, ob das Modul das Wert ist musst du selber wissen

Ich würd vermutlich damit leben dass es nach unten rutscht oder sogar direkt versuchen dass es ausgeblendet wird in kleineren Auflösungen. Wenn du die Modulklasse " hidden-phone" (mit einem Leerschlag zuerst) angibst wird das Modul auf Smartphones gar nicht angezeigt. Es gibt auch noch andere Klassen die man dort nutzen kann. Siehe getbootstrap.com/2.3.2/scaffolding.html#responsive .

Danke für die Antwort!

Ich habe mich jetzt dafür entschieden das Modul bei kleineren Bildschirmen auszublenden mit " hidden-phone" und " hidden-tablet".